<template>
  <div>
    <la-dialog
      ref="dialogRef"
      :title="dialogTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @cancel="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <el-form-item label="数据边界">
          <el-select v-model="formData.data_scope" placeholder="请选择数据边界">
            <el-option
              v-for="item in dataOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门列表" v-if="formData.data_scope == 2">
          <el-tree
            default-expand-all
            :data="deptOptions"
            node-key="id"
            :props="{ label: 'name' }"
            :default-checked-keys="formData.defaultCheckedKeys"
            ref="prmissionRef"
            show-checkbox
            :check-strictly="true"
            @check-change="handleCheckChange"
          />
        </el-form-item>
      </el-form>
    </la-dialog>
  </div>
</template>
  <script setup>
import api from "@/lnk/admin/api";
import laDialog from "@/lnk/components/la-dialog/index.vue";
import { reactive, ref, computed, nextTick } from "vue";
import feedback from "@/lnk/utils/feedback";

const emit = defineEmits(["success", "close"]);
const dialogRef = ref(null);
const formRef = ref(null);
const mode = ref("add");
const menuTree = ref([]);
const prmissionRef = ref();
const formData = ref({
  id: 0,
  data_scope: 1,
  defaultCheckedKeys: [],
});
const formRules = reactive({
  data_scope: [
    { required: true, message: "请输入用户名", trigger: "blur" },
   
  ],
});
const deptOptions = ref([]);
const dataOptions = ref([
  {
    label: "全部数据权限",
    value: "1",
  },
  {
    label: "自定义数据权限",
    value: "2",
  },
  {
    label: "本部门数据权限",
    value: "3",
  },
  {
    label: "本部门及以下数据权限",
    value: "4",
  },
  {
    label: "本人数据权限",
    value: "5",
  },
]);

const dialogTitle = computed(() => {
  return mode.value == "数据权限";
});



const getDeptOptions = async () => {
  const res = await api.dept.list();
  deptOptions.value = res.data;
};

const setFormData = async (row) => {
  const res = await api.role.read({id:row.id});
  menuTree.value = res.data;
  formData.value.id = row.id;
  formData.value.data_scope = row.data_scope;
  formData.value.defaultCheckedKeys = res.data.data_permission;
};

const open = (type = "add") => {
  mode.value = type;
  dialogRef.value.open();
};
const close = () => {
  formRef.value.resetFields();
  dialogRef.value.close();
  emit("close");
};
const handleSubmit = async () => {
  await formRef.value?.validate();
  const getCheckedKeys = prmissionRef ? prmissionRef?.value?.getCheckedKeys():[];
  const id = formData.value.id;
  const data_scope = formData.value.data_scope;
  let res = await api.role.updateDataPermission({ dept_ids: getCheckedKeys, id,data_scope });
 
  if (!res.error) {
    close();
    emit("success");
    feedback.msgSuccess(res.msg);
  } else {
    feedback.msgError(res.msg);
  }
};
const handleClose = async () => {

};
getDeptOptions()
defineExpose({

  open,
  setFormData,
});
</script>
  